<template>
  <div>
    <div class="yyt">
      <!-- 论坛顶部 -->
      <div class="syt">
        <van-nav-bar title="论坛">
          <template #right>
            <van-icon name="search" size="18" @click="onClickRight()" />
          </template>
          <template #left>
            <van-icon name="arrow-left" size="18" @click="onClickLeft()" />
          </template>
        </van-nav-bar>
      </div>
      <div>
        <!-- 展示框 -->
        <div class="syy">
          <div @click="pal()">
            <img src="static/img/gj.png" alt class="sty1" />
            <div class="stt">明星钓友</div>
          </div>
          <div @click="sc()">
            <img src="static/img/jsc.png" alt class="sty1" />
            <div class="stt1">商城</div>
          </div>
          <div>
            <img src="static/img/jb.png" alt class="sty1" />
            <div class="stt">竞钓王者</div>
          </div>
          <div @click="ku()">
            <img src="static/img/er.png" alt class="sty1" />
            <div class="stt">二手市场</div>
          </div>
          <div>
            <img src="static/img/fl.png" alt class="sty1" />
            <div class="stt">福利中心</div>
          </div>
        </div>
      </div>
      <!-- 热门主题 -->
      <div class="ass3">
        <div>热门主题</div>
        <div class="huu1" @click="xq()">
          查看全部
          <van-icon name="arrow" class="huu" />
        </div>
      </div>
      <div class="ass2">
        <div class="ass">
          <div class="ass1" @click="tyu()">
            <div>
              <img src alt="图片" />
            </div>
            <div class="a4">
              <div>主题名称</div>
              <div>点赞数量</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 小加号 蒙层 -->
      <div>
        <img src="static/img/jia.png" alt @click="show = true" class="ui" />
        <van-overlay :show="show" @click="show = false" class="skk">
          <div class="yt">
            <div @click="ty()">
              <div>
                <img src="static/img/tz.png" alt class="yu" />
              </div>
              <div>发长帖</div>
            </div>
            <div @click="ty1()">
              <div>
                <img src="static/img/jq.png" alt class="yu" />
              </div>
              <div>问技巧</div>
            </div>
            <div @click="ty2()">
              <div>
                <img src="static/img/ss.png" alt class="yu" />
              </div>
              <div>随便说说</div>
            </div>
          </div>
          <div>
            <img src="static/img/cu.png" alt class="ppo" />
          </div>
        </van-overlay>
      </div>
    </div>
    <div>
      <!-- 推荐论坛帖 -->
      <div
        class="content1-advert-all"
        v-for="(item,index) in message"
        :key="index"
        @click="ju2(item.id)"
      >
        <div>
          <div class="content1-advert-title">{{item.content}}</div>
          <div class="content1-msg">
            <img class="content1-msg-img" :src="item.picturePath[0]" />
            <img class="content1-msg-img" :src="item.picturePath[1]" />
            <img class="content1-msg-img" :src="item.picturePath[2]" />
          </div>
        </div>
        <div class="content1-user-all">
          <!-- 头像 -->
          <div @click="htg()">
            <van-image round width="5rem" height="5rem" :src="item.touxiang" />
          </div>
          <!-- 用户信息 -->
          <div class="content1-user-infor">
            <div>
              <span>用户名</span>
              <span>用户等级</span>
            </div>
            <div>用户地址</div>
          </div>
          <div class="content1-user-talk">
                <van-icon name="chat-o" />
                {{ item.commentCount}}
              </div>
              <div :class="item.selected ?'content1-user-good':'skyt1'" @click="kui(index,item.id)">
                <van-icon name="good-job-o" />
                {{ item.praiseCount }}
              </div>
        </div>
        <div>
        </div>
    </div>
</div>
    
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      show: false,
      message: [],
      sty: true
    };
  },
  mounted() {
    axios.post('/api/article/getAll', {}).then(res2 => {
      console.log(res2.data.data);
      this.message = res2.data.data;
    });
  },
  methods: {
    // 蒙层的点击事件
    ty() {
      event.stopPropagation();
      this.$router.push({
        name: '发帖',
        query: {
          ft: '发长帖'
        }
      });
    },
    ty1() {
      event.stopPropagation();
      this.$router.push({
        name: '发帖',
        query: {
          ft: '问技巧'
        }
      });
    },
    ty2() {
      event.stopPropagation();
      this.$router.push({
        name: '发帖',
        query: {
          ft: '随便说说'
        }
      });
    },
    // 明星钓友页面跳转
    pal() {
      this.$router.push({
        name: 'Pal'
      });
    },
    // 论坛详情页跳转
    xq() {
      this.$router.push({
        name: 'Details'
      });
    },
    onClickRight() {
      //页面跳转
      this.$router.push({
        name: 'Search'
      });
    },
    onClickLeft() {
      this.$router.push({
        name: '首页'
      });
    },
    // 跳转详贴
    ju2(j) {
      this.$router.push({
        name: '详贴',
        query: {
          po: j
        }
      });
    },
    // 二手市场的跳转
    ku() {
      this.$router.push({
        name: '市场'
      });
    },
    // 跳转主题的详细页
    tyu() {
      this.$router.push({
        name: '主祥',
        query:{
          
        }
      });
    },
    sc() {
      this.$router.push({
        name: '商城'
      });
    },
    htg() {
      event.stopPropagation(),
        this.$router.push({
          name: '名片'
        });
    },
    kui(fa, k) {
      event.stopPropagation();
      console.log(this.message[fa].praiseCount);
      this.message[fa].praiseCount++;
      this.message[fa].selected = false;
      axios.post(
        '/api/article/updateArticle',
        {},
        {
          params: {
            id: k,
            praiseCount: this.message[fa].praiseCount
          }
        }
      ).then(res =>{
        console.log(res)
      });
    }
  }
};
</script>
<style scoped>
/* 五个图片的大小 */
.sty1 {
  width: 4.5rem;
  height: 3.5rem;
}
/* 图片的弹性布局 */
.syy {
  display: flex;
  justify-content: space-evenly;
  background-color: white;
  padding-top: 1rem;
  height: 6rem;
}
/* 字体大小 */
.stt {
  font-size: 1.3rem;
}
.stt1 {
  font-size: 1.3rem;
  margin-left: 1rem;
}
/* 顶部的粘性布局 */
.syt {
  position: sticky;
  top: 0;
}
/* 整体背景色 */
.yyt {
  background-color: rgba(231, 227, 227, 0.623);
}
/* 小的扩折号 */
.huu {
  color: rgba(170, 170, 170, 0.397);
  position: relative;
  top: 0.1rem;
}
/* 查看全部的字体颜色 */
.huu1 {
  color: rgba(170, 170, 170, 0.397);
}
/* 小主题的样式 */
.ass {
  overflow: auto;
  background-color: white;
  width: 80rem;
  flex-wrap: nowrap;
}
/* 小主题的具体样式 */
.ass1 {
  display: inline-block;
  /* justify-content: space-evenly; */
  width: 10rem;
  height: 4rem;
  background-color: rgba(224, 217, 217, 0.363);
  margin-left: 1rem;
  margin-top: 0.7rem;
}
/* 热门主题的上部边框 */
.ass2 {
  width: 100%;
  overflow: auto;
}
/* 热门主题的样式 */
.ass3 {
  display: flex;
  justify-content: space-between;
  background-color: white;
  padding-bottom: 1rem;
  font-size: 1.6rem;
  margin-top: 2rem;
}
/* 小主题字的样式 */
.a4 {
  position: relative;
  top: -1.3rem;
  left: 4.8rem;
}
/* 小加号的样式 */
.ui {
  width: 5rem;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
}
/* 蒙层的背景色 */
.skk {
  background-color: rgba(241, 240, 236, 0.959);
}
/* 蒙层图片大小 */
.yu {
  width: 5rem;
  font-size: 1.4rem;
}
/* 蒙层图片样式 */
.yt {
  display: flex;
  justify-content: space-around;
  margin-top: 52rem;
}
/* 小叉号的样式 */
.ppo {
  width: 5rem;
  position: relative;
  left: 16.2rem;
  margin-top: 2rem;
}
.content1-advert-img {
  width: 36rem;
}
.content1-advert-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  margin-left: 1rem;
}
.content1-advert-all {
  margin-top: 1rem;
  padding: 1rem;
}
.content1-msg-img {
  width: 10rem;
  height: 8rem;
  border-radius: 0.5rem;
}
.content1-msg {
  display: flex;
  justify-content: space-evenly;
}
.content1-user-all {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  padding-bottom: 1rem;
}
.content1-user-infor {
  margin-top: 1rem;
  margin-left: 2rem;
}
.content1-user-talk {
  margin-top: 2rem;
  margin-left: 13rem;
}
.content1-user-good {
  margin-top: 2rem;
  margin-left: 1rem;
}
/* 文字导航（关注）中的内容样式 */
.content2-content {
  width: 37.5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 2rem;
  margin-top: 2rem;
}
.content2-text {
  width: 37.5rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 1.5rem;
}
.skyt1 {
  color: rgb(255, 72, 0);
  pointer-events: none;
  margin-top: 2rem;
  margin-left: 1rem;
}
</style>